<template>
  <div class="common-layout">
    <el-container>
    <el-dialog v-model="centerDialogVisible" title="请修改密码！" width="500" center :show-close="false">
    <span style="color: #606266;font-size: 16px;">
      您的账号已超过{{hoursDifferenceRounded}}小时未修改密码，为保障账号的安全性，请尽快修改密码！
    </span>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="centerDialogVisible = false">稍后修改</el-button>
            <el-button type="primary" @click="toChange()">
              前往修改
            </el-button>
          </div>
        </template>
      </el-dialog>
      <el-aside width="70px" style="height: 100vh">
        <el-menu
            default-active="/layout"
            class="el-menu-vertical-demo"
            :collapse="true"
            router
        >
          <el-menu-item index="/blog">
            <el-icon><House /></el-icon>
            <template #title>首页</template>
          </el-menu-item>
          <el-menu-item index="/layout">
            <el-icon><Monitor /></el-icon>
            <template #title>博客管理</template>
          </el-menu-item>
          <el-menu-item index="/coding" disabled>
            <el-icon><Pointer /></el-icon>
            <template #title>coding1...</template>
          </el-menu-item>
          <el-menu-item index="/coding" disabled>
            <el-icon><ChatDotRound /></el-icon>
            <template #title>coding2...</template>
          </el-menu-item>
          <el-menu-item index="/coding" disabled>
            <el-icon><FolderOpened /></el-icon>
            <template #title>coding3...</template>
          </el-menu-item>
          <el-menu-item index="/coding" disabled>
            <el-icon><Promotion /></el-icon>
            <template #title>coding4...</template>
          </el-menu-item>
          <el-sub-menu index="/coding" disabled>
            <template #title>
              <el-icon><DataLine /></el-icon>
              <span>coding5...</span>
            </template>
            <el-menu-item-group>
              <template #title><span>Group One</span></template>
              <el-menu-item index="1-1">item one</el-menu-item>
              <el-menu-item index="1-2">item two</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="Group Two">
              <el-menu-item index="1-3">item three</el-menu-item>
            </el-menu-item-group>
            <el-sub-menu index="1-4">
              <template #title><span>item four</span></template>
              <el-menu-item index="1-4-1">item one</el-menu-item>
            </el-sub-menu>
          </el-sub-menu>
          <div class="spacer"></div>
          <el-menu-item index="/coding" disabled>
            <el-icon><View /></el-icon>
            <template #title>coding6...</template>
          </el-menu-item>
          <el-menu-item index="/coding" disabled>
            <el-icon><Lock /></el-icon>
            <template #title>coding7...</template>
          </el-menu-item>
          <el-menu-item index="/coding" disabled>
            <el-icon><Setting /></el-icon>
            <template #title>coding8...</template>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-container>
        <router-view></router-view>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import {
  Setting,
  House,
  Monitor,
  Pointer,
  ChatDotRound,
  FolderOpened,
  Promotion,
  DataLine,
  View,
  Lock,
} from '@element-plus/icons-vue'

import {userInfoService} from '@/api/admin/user.js'
import useUserInfoStore from '@/stores/userinfo.js'
import {onMounted, ref} from 'vue'
const centerDialogVisible = ref(false)
const userInfoStore = useUserInfoStore();
//调用函数,获取用户详细信息
const getUserInfo = async()=>{
  //调用接口
  let result = await userInfoService();
  //数据存储到pinia中
  userInfoStore.setInfo(result.data);
}
const now = Date.now();
const targetDate = new Date(userInfoStore.info.pwdCreateTime).getTime();
const fromNow = now - targetDate;
const daysDifference = fromNow / (1000 * 60 * 60 ); // 转换为小时
const hoursDifferenceRounded = daysDifference.toFixed(1); // 保留一位小数
console.log(hoursDifferenceRounded)

getUserInfo();
//条目被点击后,调用的函数
import {useRouter} from 'vue-router'
const router = useRouter();

const DoNeedChangePwd = ()=>{
  if (hoursDifferenceRounded > 1 * 24){
    centerDialogVisible.value = true
  }
}

const toChange = ()=>{
  centerDialogVisible.value = false
  router.push('/user/resetPassword')
}

DoNeedChangePwd()

</script>

<style scoped>
.common-layout {
  height: 100vh;
  display: flex;
}
.el-menu-vertical-demo {
  height: 100vh; /* 使菜单高度占满整个视口 */
  display: flex;
  flex-direction: column;
}

.spacer {
  flex-grow: 1; /* 占据剩余空间 */
}
</style>

